<template>
    <div class="weather" v-show="isWeather">
        <van-notice-bar
                v-if="isLoadWeather"
                :text="weatherDate.city+'\xa0\xa0\xa0'+weatherDate.week+weatherDate.weather+'\xa0\xa0\xa0'+weatherDate.temphigh+'℃'+'\xa0'+'~'+'\xa0'+weatherDate.templow+'℃'+'\xa0\xa0\xa0'+weatherDate.winddirect+weatherDate.windpower+'\xa0\xa0\xa0'+'当前温度'+':'+weatherDate.temp+'℃'+'\xa0\xa0\xa0'+'空气湿度'+':'+weatherDate.humidity+'%'+'\xa0\xa0\xa0'+'PM2.5指数1小时平均'+':'+weatherDate.aqi.pm2_5+'μg/m³'+'\xa0\xa0\xa0'+'空气质量'+weatherDate.aqi.quality+','+weatherDate.index[5].detail+'\xa0'+'另:疫情期间要勤开窗通风,保持空气流动、勤洗手、出入公共场合佩戴口罩，做好个人防护工作'"
                left-icon="volume-o"
                @click="weatherDetails"
        />
        <div class="close-weather" @click="closeWeather">
            <van-icon name="cross" color="#ed6a0c" />
        </div>
    </div>
</template>

<script>
    import {getWeather} from '../api/CMS-api'
    export default {
        created() {
            getWeather('eed9a7a326471393', (localStorage.getItem('cityname'))).then(res => {
                this.weatherDate = res.result;
                this.isLoadWeather = true
            });
        },
        data(){
            return{
                weatherDate: {},
                isLoadWeather: false,
                isWeather: true,
            }
        },
        methods:{
            weatherDetails() {
                this.$router.push('/weatherDetails')
            },
            closeWeather() {
                this.isWeather = false
            }
        }
    }
</script>

<style lang="less" scoped>
    .weather {
        position: relative;
        .close-weather {
            position: absolute;
            line-height: 40px;
            right: 0;
            top: 0;
            width: 20px;
            height: 40px;
            background-color: #fffbe8;
        }
    }
</style>